<template>
  <div v-loading="loading">
    <div class="title-gra authorityDiv">
      <span style="color:#0090ff">字段分类权限</span>
      <span class="right">
        <i :class="zdflflag ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" @click="zdflflagOpen"></i>
      </span>
      <!-- <div class="grab gra-r"></div> -->
    </div>

    <div v-show="zdflflag">
      <div v-if ="fieldCategories.length!=0">
        <el-checkbox
          :class="view ? 'viewcheckbox' : ''"
          style="margin-left:40px;"
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          :disabled="view"
          @change="handleCheckAllChange"
        >全选</el-checkbox>
        <el-checkbox-group v-model="checkedFieldCategories" @change="handleCheckedChange" :class="view ? 'viewcheckbox' : ''">
          <div v-for="(val, index) in fieldCategories" :key="index" style="padding-top: 10px; padding-left:60px;">
            <el-checkbox :label="val.fieldCategoryId" :disabled="view">{{val.fieldCategoryName}}</el-checkbox>
          </div>
        </el-checkbox-group>
        <div class="mr-btn">
          <el-button type="primary" v-if="!view" @click="saveFieldCategories">确定</el-button>
        </div>
      </div>
      <div v-else style="text-align: center; margin-top:40px; color: #909399;">
        <p>暂无数据</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getFieldCategories, putFieldCategories, getRoleFieldCategories } from "@/api/authority.js";
export default {
  name: "TabServiceCategory",
  data() {
    return {
      checkAll: false,
      checkedFieldCategories: [],
      fieldCategories: [],
      isIndeterminate: false,
      zdflflag: true,
      loading: false
    };
  },
  props: ["view", "roleId"],
  methods: {
    handleCheckAllChange(val) {
      this.checkedFieldCategories = [];
      this.checkAll = false;
      if(val) {
        this.checkAll = true;
        const value = [];
        this.fieldCategories.forEach(val => {
          value.push(val.fieldCategoryId);
        });
        this.checkedFieldCategories = value;
      } 
      this.isIndeterminate = false;
    },
    handleCheckedChange(value) {
      this.checkedFieldCategories = value;
      this.checkAll = false;
      this.isIndeterminate = true;
      if(this.checkedFieldCategories.length == this.fieldCategories.length) {
        this.checkAll = true;
        this.isIndeterminate = false;
      }
    },
    zdflflagOpen() {
      this.zdflflag = !this.zdflflag;
    },
    getFieldCategories(data) {
      this.loading = true;
      this.checkAll = false;
      this.checkedFieldCategories = [];
      this.fieldCategories = [];
      this.isIndeterminate = false;
      getFieldCategories().then(res => {
        this.loading = false;
        if(res.success) {
          if(data) {
            this.fieldCategories = data;
            data.forEach(val=>{
              this.checkedFieldCategories.push(val.fieldCategoryId);
            });
            if(data.length == res.data.length) {
              this.checkAll = true;
            } else {
              this.checkAll = false;
              this.isIndeterminate = true;
            }
          } else {
            this.fieldCategories = res.data;
            this.checkedFieldCategories = [];
            getRoleFieldCategories(this.roleId).then( res => {
              if(res.success && res.data && res.data.length>0) {
                res.data.forEach(val=>{
                  this.checkedFieldCategories.push(val.fieldCategoryId);
                });
                if(this.fieldCategories.length == res.data.length) {
                  this.checkAll = true;
                } else {
                  this.checkAll = false;
                  this.isIndeterminate = true;
                }
              }
            })
          }
        }
      }).catch(()=>{
        this.loading = false;
      });
    },
    getRoleFieldCategories() {
      this.checkedFieldCategories = [];
      this.fieldCategories = [];
      this.loading = true;
      getRoleFieldCategories(this.roleId).then( res => {
        this.loading = false;
        if(res.success) {
          this.getFieldCategories(res.data);
        }
      }).catch(()=>{
        this.loading = false;
      })
    },
    //根据角色id获取选择中的数据

    saveFieldCategories() {
      const data = [];
      this.checkedFieldCategories.forEach(val=> {
        this.fieldCategories.forEach(res => {
          if(val== res.fieldCategoryId) {
            let map = {
              fieldCategoryId: res.fieldCategoryId,
              fieldCategoryName: res.fieldCategoryName
            }
            data.push(map);
          }
        })
      })
      const params = {
        categories: data
      }
      putFieldCategories(this.roleId, params).then( res => {
        if(res.success) {
          this.$message.success("保存字段分类权限成功");
        } else {
          this.$message.error(res.message);
        }
      })
    }
  }
};
</script>
<style></style>
